<template>
  <mu-card class="drag div" raised>
    <mu-card-header :title="gotTitle" sub-title="基于Electron、Vue打造">
      <mu-avatar slot="avatar">
        <img src="../assets/tieba_emotion_89.png">
      </mu-avatar>
    </mu-card-header>
    <mu-card class="timeCard noDrag">
      <mu-row>
        <mu-col span="4">
          <mu-text-field id="Time" solo v-model="maxTime" max-length="2" class="disabled-ime" onkeyup="this.value=this.value.replace(/\D/g,'')">:</mu-text-field>
        </mu-col>
        <mu-col span="4">
          <mu-text-field id="minute" solo v-model="maxMinute" max-length="2" class="disabled-ime" onkeyup="this.value=this.value.replace(/\D/g,'')">:</mu-text-field>
        </mu-col>
        <mu-col span="4">
          <mu-text-field id="maxSecond" solo v-model="maxSecond" max-length="2" class="disabled-ime" onkeyup="this.value=this.value.replace(/\D/g,'')"></mu-text-field>
        </mu-col>
      </mu-row>
      <!-- <input v-model="maxTime">
      <input v-model="maxMinute">
      <input v-model="maxSecond"> -->
    </mu-card>
    <mu-card-text>
    </mu-card-text>
    <mu-card-actions class="noDrag">
      <mu-flex justify-content="around" align-items="center">
        <mu-button tabindex="-1" style="width: 88.68%;" :class="[isBtn?'btnColor-end':'btnColor-start']" @click="btnClick">{{BtnText}}</mu-button>
      </mu-flex>
    </mu-card-actions>
  </mu-card>
</template>

<script>
// import { setTimeout, clearTimeout } from 'timers'

export default {
  name: 'landing-page',
  data () {
    return {
      Time: '0',
      Minute: '0',
      Second: '0',
      Millisecond: 0,
      Name: '',
      Versions: '',
      OS: require('os').platform(),
      BtnText: '开始',
      isBtn: false,
      Timer: null
    }
  },
  mounted () {
    //! ipc通信
    this.$electron.ipcRenderer.send('get-app-versions')

    this.$electron.ipcRenderer.on('got-app-versions', (event, versions) => {
      this.Versions = versions.toString()
    })

    this.$electron.ipcRenderer.send('get-app-name')
    this.$electron.ipcRenderer.on('got-app-name', (event, name) => {
      this.Name = name.toString()
    })

    // let input = document.getElementsByClassName('mu-text-field-input')
    // let delDiv = document.getElementsByClassName('mu-text-field')

    // input[0].style +=
    //   ';font-size: 72px;height: 100%;text-align: center;color: rgb(92, 107, 192);'
    // input[1].style +=
    //   ';font-size: 72px;height: 100%;text-align: center;color: rgb(92, 107, 192);'
    // input[2].style +=
    //   ';font-size: 72px;height: 100%;text-align: center;color: rgb(92, 107, 192);'

    // delDiv[0].children[1].remove()
    // delDiv[1].children[1].remove()
    // delDiv[2].children[1].remove()

    // console.log(delDiv)
  },
  computed: {
    gotTitle () {
      return this.Name + '  v' + this.Versions
    },
    maxTime: {
      get: function () {
        return this.Time < 10 ? `0${this.Time}` : `${this.Time}`
      },
      set: function (value) {
        this.Time = value
      }
    },
    maxMinute: {
      get: function () {
        return this.Minute < 10 ? `0${this.Minute}` : `${this.Minute}`
      },
      set: function (value) {
        if (parseInt(value) > 60) {
          this.Minute = this.addZero(parseInt(value) - 60)
          this.Time = this.addZero(parseInt(this.Time) + 1)
        } else if (parseInt(value) === 60) {
          this.Minute = '00'
          this.Time = this.addZero(parseInt(this.Time) + 1)
        } else {
          this.Minute = value
        }
      }
    },
    maxSecond: {
      get: function () {
        return this.Second < 10 ? `0${this.Second}` : `${this.Second}`
      },
      set: function (value) {
        if (parseInt(value) > 60) {
          this.Second = this.addZero(parseInt(value) - 60)
          this.Minute = this.addZero(parseInt(this.Minute) + 1)
        } else if (parseInt(value) === 60) {
          this.Second = '00'
          this.Minute = this.addZero(parseInt(this.Minute) + 1)
        } else {
          this.Second = value
        }
      }
    }
  },
  methods: {
    btnClick () {
      if (this.BtnText === '开始') {
        //* 全为空则不能倒计时
        if (
          this.Time === '00' &&
          this.Minute === '00' &&
          this.Second === '00'
        ) {
          this.isBtn = false
          this.BtnText = '开始'
        } else {
          //* 任何项为空就置零
          if (this.Time === '') {
            this.Time = '00'
          }
          if (this.Minute === '') {
            this.Minute = '00'
          }
          if (this.Second === '') {
            this.Second = '00'
          }

          //* 任何项为个位数就在十位补零
          if (this.Time.length === 1) {
            this.Time = this.addZero(this.Time)
          }
          if (this.Minute.length === 1) {
            this.Minute = this.addZero(this.Minute)
          }
          if (this.Second.length === 1) {
            this.Second = this.addZero(this.Second)
          }

          this.isBtn = true
          this.BtnText = '取消'
          //* 开始后禁用所有input
          // for (
          //   let index = 0;
          //   index < document.getElementsByTagName('input').length;
          //   index++
          // ) {
          //   document.getElementsByTagName('input')[index].disabled = true
          // }

          this.Millisecond =
            parseInt(this.Time) * 60 * 60 * 1000 +
            parseInt(this.Minute) * 60 * 1000 +
            parseInt(this.Second) * 1000

          this.timer = setTimeout(() => {
            console.log('object')
          }, 1000)
        }
      } else {
        this.isBtn = false
        this.BtnText = '开始'

        //* 取消后激活所有input
        // for (
        //   let index = 0;
        //   index < document.getElementsByTagName('input').length;
        //   index++
        // ) {
        //   document.getElementsByTagName('input')[index].disabled = false
        // }

        clearTimeout(this.timer)
      }
    },
    //* 个位数在前面添0
    addZero (value) {
      if (value < 10) {
        return `0${value}`
      } else {
        return `${value}`
      }
    }
  },
  watch: {
    Time: {
      handler (newVal) {
        this.addZero(newVal)
      }
    },
    Minute: {
      handler (newVal) {
        this.addZero(newVal)
      }
    },
    Second: {
      handler (newVal) {
        this.addZero(newVal)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.div {
  user-select: none;
  height: 100%;
  // background: #5c6bc0;
  background-image: url("../assets/background.svg");
}
.drag {
  //! 一般添加到根组件上
  -webkit-app-region: drag;
}
.noDrag {
  //! 添加到所有又事件触发的组件上，不然不能触发事件
  -webkit-app-region: no-drag;
}
.timeCard {
  height: 20%;
  width: 85%;
  margin: 0 auto;
  // text-align: center;
  // line-height: initial;
  // font-size: 72px;

  background-color: rgba(58, 58, 58, 0.118);
}
.row {
  height: 100%;
  display: flex;
  div {
    height: 100%;
    div {
      width: inherit;
      font-size: 46px;
      color: rgb(92, 107, 192);
    }
  }
}
.disabled-ime {
  ime-mode: disabled;
}
.btnColor-start {
  background-color: antiquewhite;
}
.btnColor-end {
  background-color: rgb(190, 16, 16);
}
</style>

